<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">企业名称：</div>
      <el-input v-model="params.enterpriseName" clearable placeholder="请输入企业名称" class="search-main" @clear="doSearch" />
      <el-date-picker
        v-model="params.time"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-button type="primary" @click="doSearch">查询</el-button>
    </div>
    <div class="create-container">
      <el-button type="primary" @click="$router.push('/park/addEnterprise?mode=add')">添加企业</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <!-- 表格区域 -->
      <div class="table">
        <el-table style="width: 100%" :data="feeList">
          <el-table-column type="index" label="序号" />
          <el-table-column label="账单编号" prop="billNumber" />
          <el-table-column label="企业名称" prop="enterpriseName" />
          <el-table-column label="租赁楼宇" prop="buildingName" />
          <el-table-column label="物业费(元/m²)" prop="propertyFeePrice" />
          <el-table-column label="账单金额(元)" prop="paymentAmount" />
          <el-table-column label="缴费时间" prop="createTime" />
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button size="mini" type="text" @click="$router.push(`/park/enterpriseDetail?id=${row.id}`)">查看</el-button>
              <el-button size="mini" type="text" @click="delFee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-container">
        <el-pagination
          layout="total, prev, pager, next"
          :total="total"
          :page-size="params.pageSize"
          @current-change="pageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getFeeListAPI, delFeeAPI } from '@/apis/wuyeManager'
export default {
  name: 'Building',
  data() {
    return {
      feeList: [],
      params: {
        page: 1,
        pageSize: 10,
        enterpriseName: '', // 企业名称
        time: []
      },
      total: 0,
      feeData: {
        billNumber: 0, // 物业费账单编号
        enterpriseName: '', // 企业名称
        buildingName: '', // 楼宇名称
        buildingId: 0, // 楼宇id
        enterpriseId: 0, // 企业id
        propertyFeePrice: 0, // 物业费价格
        startTime: '', // 缴费周期-开始时间
        endTime: '', // 缴费周期-结束时间
        paymentAmount: 0, // 支付金额
        paymentMethod: '', // 支付方式
        createTime: '' // 缴费时间即账单录入时间

      }
    }
  },
  created() {
    this.getFeeList()
  },
  methods: {
    // 获取费用列表
    async getFeeList() {
      let params = this.params
      if (this.params.time && this.params.time.length) {
        params = {
          ...this.params,
          start: this.params.time[0],
          end: this.params.time[1]
        }
      }
      delete params.time
      const { data: { rows, total }} = await getFeeListAPI(params)
      this.feeList = rows
      this.total = total
    },
    // 分页
    pageChange(page) {
      this.params.page = page
      this.getFeeList()
    },
    // 准备查询后调方法
    doSearch() {
      this.params.page = 1
      this.getFeeList()
    },
    async delFee(id) {
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delFeeAPI(id)
        this.getFeeList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
